<template>
  <div class="adv_container">
    <!-- 中间导航 -->
    <div class="middle-net">
      <!-- <el-image class="addrewidth" :src="adv_img" fit="fill"></el-image> -->
      <el-image
        class="addrewidth"
        v-for="(item, index) in adv_list"
        :key="index"
        :src="imgurl + item.src"
        fit="fill"
        @click="ToadvDetails(_this.message, item.id)"
      ></el-image>
    </div>
  </div>
</template>
<script>
export default {
  props: ["message"],
  components: {
    //slick: Slick
    //VDistpicker
  },
  data() {
    return {
      imgurl: this.$urls,
      adv_img: require("../../assets/images/adv_img.png"),
      adv_list: []
    };
  },
  created() {
    //搜索广告链接
    this.PostserchLinks();
  },
  methods: {
    //搜索广告链接
    PostserchLinks() {
      let _this = this;
      //console.log(_this.message);
      _this.$axios.post(_this.$basis + "/ad_banner").then(res => {
        let data = res.data.data;
        let resdata = res.data;
        //console.log(res);
        _this.adv_list = [];
        switch (resdata.code) {
          case 0:
            for (let i = 0; i < data.length; i++) {
              if (i == _this.message) {
                _this.adv_list.push({
                  id: data[i].id,
                  src: data[i].src,
                  sort: data[i].sort
                });
              }
            }
            break;
          case 1:
            console.log(resdata.msg);
            break;
        }
      });
    },
    //跳转广告详情
    ToadvDetails() {
      this.$router.push("/AdvDetails");
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/css/theme";
.adv_container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  //min-width: 1200px;
  height: auto;
  cursor: pointer;
  background: #ffffff;
  .middle-net {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    //min-width: 850px;
    height: auto;
    max-height: 260px;
    .addrewidth {
      width: 100%;
      max-width: 100%;
      height: 260px;
      max-height: 100%;
    }
  }
}
</style>
